<template>
  <div class="menus-wrapper">
    <div class="menus-body">
      <div class="menus" @mouseenter="enter" @mouseleave="leave">
        <div
          class="menu-item"
          v-for="(item, index) in typeCity"
          :key="index"
          @mouseover="handerActive(index)"
        >
          <div>{{ item.type }}</div>
          <div>
            <span>
              <i class="el-icon-arrow-right"></i>
            </span>
          </div>
        </div>
      </div>
      <ul class="sub-menus" v-if="flag" @mouseenter="enter" @mouseleave="leave">
        <li v-for="(type, i) in typeCity[currentIndex].children" :key="i">
          <nuxt-link :to="`?city=${type.city}`">
            <i>{{ i + 1 }}</i>
            <span class="city">{{ type.city }}</span>
            <span class="desc">{{ type.desc }}</span>
          </nuxt-link>
        </li>
      </ul>
    </div>

    <div class="aside-recommend">
      <h4 class="aside-title">推荐城市</h4>
      <nuxt-link to="#" class="aside-recommend-item">
        <img src="http://157.122.54.189:9093/images/pic_sea.jpeg" alt />
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeCity: [
        {
          children: [],
        },
      ],
      currentIndex: 0,
      flag: false,
    };
  },
  created() {
    this.$axios({
      url: "/posts/cities",
    }).then((res) => {
      // console.log(res.data);
      this.typeCity = res.data.data;
    });
  },
  methods: {
    enter() {
      this.flag = true;
    },
    leave() {
      this.flag = false;
    },
    handerActive(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.active {
  border-right-color: #ffffff;
  color: orange;
}
.menus-wrapper {
  position: relative;
  width: 260px;
  z-index: 2;

  .menus {
    width: 260px;
    border: 1px solid #ddd;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 0 1px #f5f5f5;
    z-index: 2;

    .menu-item {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      padding: 0 20px;
      font-size: 14px;
      position: relative;
      z-index: 2;
      div {
        &:first-child {
          flex: 1;
        }
      }
      .el-icon-arrow-right {
        line-height: 42px;
        color: #999;
        font-size: 20px;
      }
      &:hover .el-icon-arrow-right {
        color: orange;
      }
    }

    .menu-item:hover,
    .menu-item span:hover {
      border-right-color: #ffffff;
      color: orange;
    }
  }

  .sub-menus {
    position: absolute;
    left: 260px;
    top: 0;
    width: 350px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;

    li {
      font-size: 14px;
      line-height: 1.5;

      i {
        color: orange;
        font-size: 24px;
        font-style: italic;
      }
      .city {
        margin: 0 15px 0 13px;
        font-size: 14px;
        color: orange;
        &:hover {
          text-decoration: underline;
        }
      }
      .desc {
        &:hover {
          text-decoration: underline;
        }
      }

      strong {
        margin: 0 10px;
        color: orange;
        font-weight: 400;
        font-size: 18px;
      }
      span {
        color: #888;
      }

      * {
        vertical-align: middle;
      }
    }
  }

  .aside-recommend {
    margin-top: 20px;

    .aside-title {
      font-weight: 400;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 10px;
    }

    .aside-recommend-item img {
      width: 100%;
      display: block;
    }
  }
}
</style>
